<template>
  <div class="num-list">
    <div v-for="(item,i) in list" :key="i" class="num-item">
      <div class="num-left">
        <div class="left-text1">{{ item.title }}</div>
        <div class="left-text2">
          <span class="value">{{ item.value }}</span>
          <span class="unit">{{ item.unit }}</span>
        </div>
        <div class="left-text3">
          <span class="label">{{ item.title2 }}：</span>
          <span class="value">{{ item.value2 }}</span>
        </div>
      </div>
      <div class="num-right">
        <div class="img-box">
          <span :class="['rate', item.up?'up':'down']">{{ item.rate }}</span>
          <span :class="[ item.up?'up-img':'down-img']"></span>
        </div>
        <div class="text">环比</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "numList",
  props: {},
  components: {},
  data () {
    return {
      list: [
        {
          title: "累计客商总数",
          title2: "今日活跃",
          value: "625300",
          value2: "5620",
          unit: "个",
          rate: "2%",
          up: true
        },
        {
          title: "累计订单总数",
          title2: "今日订单数量",
          value: "625300",
          value2: "5620",
          unit: "条",
          rate: "2%",
          up: false
        },
        {
          title: "累计运单总数",
          title2: "今日运单数量",
          value: "326490",
          value2: "8260",
          unit: "条",
          rate: "2%",
          up: true
        },
        {
          title: "累计运量总数",
          title2: "今日运量数量",
          value: "625300",
          value2: "5620",
          unit: "吨",
          rate: "2%",
          up: true
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {},

};
</script>

<style lang="scss" scoped>
@import "../../scss/common.scss";

.num-list {
  display: flex;
  gap: px-to-rem(17px);
  height: px-to-rem(90px);
  padding: 0 px-to-rem(17px);

  .num-item {
    flex: 1;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background: url("../../images/card-bg1.png") no-repeat;
    background-size: 100% 100%;

    .num-left {
      width: 70%;
      box-sizing: border-box;
      padding-left: px-to-rem(30px);
      display: flex;
      flex-direction: column;

      .left-text1 {
        color: #fff;
        font-size: px-to-rem(16px);
        font-family: "YouSheBiaoTiHei";
      }

      .left-text2 {
        font-size: 0;
        margin: px-to-rem(5px) 0;

        .value {
          color: #00b6ff;
          font-size: px-to-rem(22px);
          font-family: "e1234";
          font-weight: bold;
          font-stretch: normal;
          letter-spacing: -2px;
        }

        .unit {
          color: #adacac;
          margin-left: px-to-rem(4px);
          font-size: px-to-rem(14px);
        }
      }

      .left-text3 {
        font-size: px-to-rem(13px);

        .label {
          color: rgba(255, 255, 255, 0.5);
        }

        .value {
          color: rgba(0, 182, 255, 0.5);
        }
      }

    }

    .num-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: center;
      margin-right: px-to-rem(25px);
      font-size: px-to-rem(16px);

      .img-box {
        display: flex;
        align-items: center;
      }

      .rate {
        font-size: px-to-rem(13px);
        margin-right: px-to-rem(3px);
      }

      .up {
        color: #41ef5e;
      }

      .down {
        color: #ef4341;
      }

      .up-img {
        display: inline-flex;
        width: 7px;
        height: px-to-rem(18px);
        background: url("../../images/up.png") no-repeat;
        background-size: 100% 100%;
      }

      .down-img {
        display: inline-flex;
        width: 7px;
        height: px-to-rem(18px);
        background: url("../../images/down.png") no-repeat;
        background-size: 100% 100%;
      }

      .text {
        margin-top: px-to-rem(4px);
        font-size: px-to-rem(13px);
        color: rgba(255, 255, 255, 0.3);
      }
    }

  }
}
</style>
